<template>
  <div class="user-management">
    <div class="user-stats">
      <div class="stat-item">
        <h3>总用户</h3>
        <p>{{ userData?.userStats.total || 0 }}</p>
      </div>
      <div class="stat-item">
        <h3>活跃用户</h3>
        <p>{{ userData?.userStats.active || 0 }}</p>
      </div>
      <div class="stat-item">
        <h3>本月新增</h3>
        <p>{{ userData?.userStats.newThisMonth || 0 }}</p>
      </div>
    </div>
    
    <div class="user-table-container">
      <h3>用户列表</h3>
      <div v-if="dataStore.loading" class="loading">加载中...</div>
      <table v-else>
        <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>邮箱</th>
            <th>角色</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in userData?.users" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
            <td>
              <span class="role-badge" :class="user.role === 'admin' ? 'admin' : 'user'">
                {{ user.role === 'admin' ? '管理员' : '普通用户' }}
              </span>
            </td>
            <td>
              <span class="status-badge" :class="user.status === 'active' ? 'active' : 'inactive'">
                {{ user.status === 'active' ? '活跃' : '未活跃' }}
              </span>
            </td>
            <td>
              <button class="action-btn edit-btn">编辑</button>
              <button class="action-btn delete-btn">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { useDataStore } from '@/stores/data'

const dataStore = useDataStore()
const userData = dataStore.userData
</script>

<style scoped>
.user-management {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.user-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.stat-item {
  background-color: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.stat-item h3 {
  margin: 0 0 0.5rem 0;
  color: #555;
  font-size: 1rem;
}

.stat-item p {
  margin: 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: #3498db;
}

.user-table-container {
  background-color: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.user-table-container h3 {
  margin: 0 0 1rem 0;
  color: #555;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

th {
  background-color: #f9f9f9;
  color: #555;
}

.role-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  color: white;
}

.role-badge.admin {
  background-color: #e67e22;
}

.role-badge.user {
  background-color: #3498db;
}

.status-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  color: white;
}

.status-badge.active {
  background-color: #2ecc71;
}

.status-badge.inactive {
  background-color: #95a5a6;
}

.action-btn {
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  margin-right: 0.5rem;
}

.edit-btn {
  background-color: #3498db;
  color: white;
}

.delete-btn {
  background-color: #e74c3c;
  color: white;
}

.loading {
  color: #777;
  padding: 2rem;
  text-align: center;
}
</style>
